---
# title: "Font Size"
title: "字体大小"
# description: "Utilities for controlling the font size of an element."
description: "用来控制元素字体大小的功能类"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/fontSize'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = { plugin }

## 用法

<!-- Control the font size of an element using the `text-{size}` utilities. -->
使用 `text-{size}` 功能类控制元素的字体大小。

```html purple
<template preview>
  <dl class="text-violet-600">
    <div class="flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-3">xs</dt>
      <dd class="text-xs font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-4">sm</dt>
      <dd class="text-sm font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-5">base</dt>
      <dd class="text-base font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">lg</dt>
      <dd class="text-lg font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-6 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">xl</dt>
      <dd class="text-xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-8 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">2xl</dt>
      <dd class="text-2xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">3xl</dt>
      <dd class="text-3xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-10 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-6">4xl</dt>
      <dd class="text-4xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-12 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-7">5xl</dt>
      <dd class="text-5xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-12 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-8">6xl</dt>
      <dd class="text-6xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-14 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">7xl</dt>
      <dd class="text-7xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-16 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">8xl</dt>
      <dd class="text-8xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
    <div class="mt-20 flex items-start">
      <dt class="w-16 flex-shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-10">9xl</dt>
      <dd class="text-9xl font-medium">The quick brown fox jumped over the lazy dog.</dd>
    </div>
  </dl> 
</template>

<p class="**text-xs** ...">The quick brown fox ...</p>
<p class="**text-sm** ...">The quick brown fox ...</p>
<p class="**text-base** ...">The quick brown fox ...</p>
<p class="**text-lg** ...">The quick brown fox ...</p>
<p class="**text-xl** ...">The quick brown fox ...</p>
<p class="**text-2xl** ...">The quick brown fox ...</p>
<p class="**text-3xl** ...">The quick brown fox ...</p>
<p class="**text-4xl** ...">The quick brown fox ...</p>
<p class="**text-5xl** ...">The quick brown fox ...</p>
<p class="**text-6xl** ...">The quick brown fox ...</p>
<p class="**text-7xl** ...">The quick brown fox ...</p>
<p class="**text-8xl** ...">The quick brown fox ...</p>
<p class="**text-9xl** ...">The quick brown fox ...</p>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the font size of an element at a specific breakpoint, add a `{screen}:` prefix to any existing font size utility. For example, use `md:text-lg` to apply the `text-lg` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的字体大小，可在任何现有的字体大小功能类前添加 `{screen}:` 前缀。例如，使用 `md:text-lg` 来仅在中等及以上尺寸的屏幕应用 `text-lg` 功能类。

```html
<p class="text-base **md:text-lg** ...">The quick brown fox jumped over the lazy dog.</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

<!-- ### Font Sizes -->
### 字体大小

<!-- By default Tailwind provides 10 `font-size` utilities. You change, add, or remove these by editing the `theme.fontSize` section of your Tailwind config. -->
默认情况下，Tailwind 提供了 10 个 `font-size` 功能类。您可以通过编辑您的 Tailwind 配置中的 `theme.fontSize` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      fontSize: {
-       'xs': '.75rem',
-       'sm': '.875rem',
+       'tiny': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
-       '3xl': '1.875rem',
-       '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
+       '7xl': '5rem',
      }
    }
  }
```

<!-- ### Providing a default line-height -->
### 提供默认行高

<!-- You can provide a default line-height for each of your font-sizes using a tuple of the form `[fontSize, lineHeight]` in your `tailwind.config.js` file. -->
您可以在您的 `tailwind.config.js` 文件中使用 `[fontSize, lineHeight]` 形式的元组为您的每个字体大小提供一个默认的行高。

```js
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: ['14px', '20px'],
      base: ['16px', '24px'],
      lg: ['20px', '28px'],
      xl: ['24px', '32px'],
    }
  }
}
```

<!-- We already provide default line heights for each `.text-{size}` class. -->
我们已经为每个 `.text-{size}` 类提供了默认的行高。

<!-- ### Providing a default letter-spacing -->
### 提供默认字母间距

<!-- If you also want to provide a default letter-spacing value for a font size, you can do so using a tuple of the form `[fontSize, { letterSpacing, lineHeight }]` in your `tailwind.config.js` file. -->
如果您还想为字体大小提供一个默认的字母间距值，您可以在您的 `tailwind.config.js` 文件中使用 `[fontSize, { letterSpacing, lineHeight }]` 这样的元组来实现。

```js
// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}
```

### 变体

<Variants plugin="fontSize" name="text sizing" />

### 禁用

<Disabling plugin="fontSize" name="text sizing" />
